<template>
	<!-- 个人信息 -->
	<view>
		<view class="cu-list menu shadow-lg sm-border">
			<view class="cu-item arrow minheight" hover-class="contentHover" hover-stay-time="50" @click="chooseImage(0)">
				<view class="content"><text class="text-black icon-title">头像:</text></view>
				<image class="avatarurl" @tap.stop="$tools.lookImage('../../../static/logo/logo.png')" src="../../../static/logo/logo.png"></image>
			</view>
			<view
				class="cu-item arrow"
				hover-class="contentHover"
				hover-stay-time="50"
				@click="
					showFullName = true;
					hideKeyboard();
				"
			>
				<view class="content"><text class="text-black icon-title">昵称:</text></view>
				<view class="action">
					<text class="text-grey text-sm">{{ uinfor.fullName || 'jo' }}</text>
				</view>
			</view>
			<view
				class="cu-item arrow"
				hover-class="contentHover"
				hover-stay-time="50"
				@click="
					showUserName = true;
					hideKeyboard();
				"
			>
				<view class="content nav"><text class="text-black icon-title">用户名:</text></view>
				<view class="action text-cut">
					<text class="text-grey text-sm">{{ uinfor.userName || 'jomo' }}</text>
				</view>
			</view>
			<view
				class="cu-item arrow"
				hover-class="contentHover"
				hover-stay-time="50"
				@click="
					showSex = true;
					hideKeyboard();
				"
			>
				<view class="content"><text class="text-black icon-title">性别:</text></view>
				<view class="action">
					<text class="text-grey text-sm">{{ uinfor.userSexName || '保密' }}</text>
				</view>
			</view>
		</view>
		<!-- 昵称修改 -->
		<u-popup :show="showFullName" :round="10" mode="bottom" closeable closeOnClickOverlay @close="closePop">
			<view class="margin padding">
				<u--form>
					<view class="height-300">
						<u--input placeholder="请输入昵称" border="bottom" maxlength="32" :value="uinfor.fullName" autoBlur @change="fullName" @confirm="changeName"></u--input>
					</view>
				</u--form>
				<view class="inputBtn"><u-button @click="changeName" customStyle="padding:0 50rpx" type="primary" :loading="showloading" loadingText="修改中">确定</u-button></view>
			</view>
		</u-popup>
		<!-- 用户名修改 -->
		<u-popup :show="showUserName" :round="10" mode="bottom" closeable closeOnClickOverlay @close="closePop">
			<view class="margin padding">
				<u--form>
					<view class="height-300">
						<u--input
							:disabled="!uinfor.isChangeUsername"
							customStyle="background-color: transparent;"
							placeholder="请输入用户名"
							border="bottom"
							maxlength="32"
							autoBlur
							:value="uinfor.userName"
							@change="userName"
							@confirm="changeName"
						></u--input>
					</view>
				</u--form>
				<view class="inputBtn " v-if="uinfor.isChangeUsername">
					<u-button @click="changeName" customStyle="padding:0 50rpx;" type="primary" :loading="showloading" loadingText="修改中">确定</u-button>
				</view>
				<view class="inputBtn text-gray" v-else>用户名已不可修改</view>
			</view>
		</u-popup>
		<!-- 性别选择 -->
		<u-action-sheet :show="showSex" :actions="sexList" title="请选择性别" @close="showSex = false" @select="sexSelect"></u-action-sheet>
		<!-- 头像修改 -->
		<avatar class="avatar-upload" v-show="isShowavatar" @upload="doUpload" quality="1" canRotate="false" ref="avatar"></avatar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showFullName: false,
			showUserName: false,
			showSex: false,
			showloading: false,
			sexList: [
				{
					name: '男',
					userSex: 1
				},
				{
					name: '女',
					userSex: 2
				},
				{
					name: '保密',
					userSex: 0
				}
			],
			params: {
				imageType: '',
				userName: '',
				fullName: ''
			},
			isShowavatar: false //显示头像裁剪
		};
	},
	onLoad() {},
	methods: {
		fullName(val) {
			console.log('fullName', val);
			this.params.fullName = val;
		},
		userName(val) {
			console.log('userName', val);
			this.params.userName = val;
		},
		changeName() {
			console.log('this.params--->', this.params);
			this.showloading = true;
			if (this.params.fullName) this.changeFullName();
			if (this.params.userName) this.changeUserName();
			if (!this.params.userName || !this.params.userName) this.closePop();
		},
		async changeFullName() {
			console.log('changeFullName');
		},
		async changeUserName() {
			console.log('changeUserName');
		},
		async sexSelect(e) {
			console.log('changeUserName');
		},
		closePop() {
			console.log('closePop');
			this.showUserName = false;
			this.showFullName = false;
			this.showloading = false;
			this.params.fullName = '';
			this.params.userName = '';
		},
		hideKeyboard() {
			uni.hideKeyboard();
		}
	}
};
</script>

<style lang="scss">
.minheight {
	min-height: 130rpx !important;
}

.cu-list .cu-item {
	transition: all 0.1s ease-in-out 0s;
	transform: translateX(0rpx);
}

.cu-list.menu > .cu-item.arrow {
	padding-right: 70rpx;
}

.avatarurl {
	width: 90rpx;
	height: 90rpx;
	border-radius: 50%;
}

.avatar-upload {
	position: absolute;
	top: 0;
	left: 0;
}
.inputBtn {
	display: inline-grid;
	width: 100%;
	justify-content: flex-end;
}
</style>
